<!DOCTYPE html>
<style>
  td {
    padding: 0;
  }
  table {
    width: 10000px;
    height: 10000px;
    border-spacing: 0;
    border-collapse: collapse;
  }
  col {
    border: 2px solid blue;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
</style>
<div id="container" style="will-change: transform; overflow: scroll; width: 400px; height: 400px">
  <table id="table">
    <colgroup>
      <col style="border-color: red">
      <col style="border-color: gray">
      <col style="border-color: magenta">
      <col style="border-color: blue">
      <col style="border-color: cyan">
      <col style="border-color: yellow">
      <col style="border-color: orange">
      <col style="border-color: green">
    </colgroup>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </table>
</div>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
  container.scrollTop = 10000;
  container.scrollLeft = 10000;
}, true);
</script>
